<template>
  <div class="addTransformerPage">
    <!-- 返回 -->
    <button class="return" @click="returnBack">
      <img src="@/assets/pic2/转到.png" title="返回" />
    </button>
    <!-- 推荐思路 -->
    <div class="title">地块推荐思路</div>
    <div class="recommendText">
      <p>1.优先选择村集体用地</p>
      <p>2.避开交通道路、水系河涌、居民房屋和永久基本农田</p>
      <p>3.尽量选择非耕地的地块</p>
    </div>
    <!-- 图层标题 -->
    <div class="title">{{ location }}台区土地现状一张图</div>
    <!-- 图层列表 -->
    <div class="layerList">
      <div class="layer" v-for="(data, index) in layerList" :key="index">
        <div></div>
        <span>图层名:</span>
        <span class="layerName">{{ data.name }}</span>
        <span>图层颜色:</span>
        <div
          class="layerLegend"
          :style="{
            border: data.borderStyle,
            backgroundColor: data.bgStyle,
          }"
        ></div>
        <button
          class="layerButton"
          :style="{ backgroundColor: data.color }"
          @click="layerShowChange"
        >
          <img src="@/assets/pic2/灯泡.png" :alt="data.name" />
        </button>
      </div>
    </div>
    <!-- 标题 -->
    <div class="title">推荐面查询结果</div>
    <el-table :data="tableData" :key="timeStamp" style="font-weight: bold">
      <el-table-column prop="key" label="字段" width="150" />
      <el-table-column prop="value" label="数值" />
    </el-table>
  </div>
</template>

<script>
/*eslint-disable */
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

export default {
  name: "新增配变设施界面",
  data() {
    return {
      tableData: [],
      location: "示例位置",
      layerList: [
        {
          name: "集体用地",
          borderStyle: "2px solid #f89407",
          bgStyle: "rgba(244, 234, 42,0)",
          color: "#f89407",
        },
        {
          name: "基本农田",
          borderStyle: "2px solid #f4ea2a",
          bgStyle: "rgba(244, 234, 42,0.5)",
          color: "#f4ea2a",
        },
        {
          name: "水系范围",
          borderStyle: "2px solid #26b7ff",
          bgStyle: "rgba(38,183,255,0.5)",
          color: "#26b7ff",
        },
        {
          name: "交通道路",
          borderStyle: "2px solid #212529",
          bgStyle: "rgba(33, 37, 41,0.5)",
          color: "#212529",
        },
        {
          name: "推荐地块",
          borderStyle: "2px solid #d81e06",
          bgStyle: "rgba(230, 19, 0,0.5)",
          color: "#d81e06",
        },
        // {
        //   name: "土地利用现状",
        //   borderStyle: "2px solid #f89407",
        //   bgStyle: "rgba(248,148,7,0.5)",
        //   color: "#f89407",
        // },
      ],
      tableData: [],
      subList: [],
    };
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const { proxy } = getCurrentInstance();

    // 参考图层列表
    let layerList = [
      "集体用地",
      "交通道路",
      "水系范围",
      "基本农田",
      "推荐地块",
    ];
    let layerShow = [true, true, true, true, true];

    onMounted(() => {
      // 读取台区名称
      proxy.location =
        route.query.name.split("号")[0].split("大同村")[1] + "号";
      // 地图初始化
      initMap(true);
      // 订阅
      subscribeList();
    });

    // 地图初始化
    function initMap(flag) {
      // 开启所有图层
      for (let index = 0; index < layerList.length; index++) {
        pubsub.publish("recLayerControll", {
          name: proxy.location,
          index,
          flag,
        });
      }
    }

    // 订阅
    function subscribeList() {
      proxy.subList.push(
        pubsub.subscribe("recommendLayerData", (n, data) => {
          // 数据字典
          let dictionary = [
            {
              key: "name",
              value: "名称",
            },
            {
              key: "DLMC",
              value: "现状地类",
            },
            {
              key: "QSDWMC",
              value: "权属单位名称",
            },
            {
              key: "Shape_Area",
              value: "面积（㎡）",
            },
          ];
          // 填入
          proxy.tableData = [];
          dictionary.forEach((element) => {
            for (const key in data) {
              if (key === element.key) {
                proxy.tableData.push({
                  key: element.value,
                  value: data[key],
                });
              }
            }
          });
        })
      );
    }

    // 返回
    function returnBack() {
      initMap(false);
      window.history.go(-1);
    }

    // 图层控制按钮
    function layerShowChange(e) {
      let index = layerList.indexOf(e.target.alt);
      let show = !layerShow[index];
      layerShow[index] = !layerShow[index];
      pubsub.publish("recLayerControll", {
        name: proxy.location,
        index,
        flag: show,
      });
      // console.log(layerShow);
    }

    return { returnBack, layerShowChange };
  },
};
</script>

<style lang="less" scoped>
.addTransformerPage {
  color: white;
  height: 100%;
  > .title {
    background-image: ~"url(@{app-images-root}/button_bg6.png)";
    background-size: 100% 100%;
    font-size: 180%;
    font-weight: bold;
    width: 90%;
    padding-left: 5%;
    padding-bottom: 1%;
    margin-top: 2%;
    margin-left: 2%;
  }

  > .recommendText {
    font-size: 150%;
    padding: 2%;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, #fff, #0000);
    border-image-slice: 1;
  }
  > .layerList {
    margin-bottom: 3%;
    > .layer {
      margin: 1.5%;
      padding: 1% 0;
      width: 85%;
      border-bottom: 1px solid;
      border-image: linear-gradient(to right, #fff, #0000);
      border-image-slice: 1;
      > * {
        display: inline-block;
        margin: 0 0.5%;
      }
      > div:first-child {
        background-color: white;
        width: 5px;
        height: 25px;
        border-radius: 15%;
        position: relative;
        top: 3px;
        margin-right: 2.5%;
      }
      > span {
        font-size: 120%;
        font-weight: bold;
        margin: 0;
      }
      > .layerName {
        font-size: 200%;
        margin-right: 5%;
      }
      > .layerLegend {
        background-color: rgba(18, 150, 219, 0.5);
        border: 2px solid #1296db;
        width: 25px;
        height: 25px;
        position: relative;
        top: 5px;
      }
      > .layerButton {
        outline: none;
        background-color: #1296db;
        border-radius: 10px;
        border: transparent;
        width: 38px;
        height: 38px;
        float: right;
        > img {
          width: 100%;
        }
      }
    }
  }
}

.return {
  background-color: rgb(18, 150, 219);
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 1000;
  top: 0.8%;
  right: 0%;
  outline: none;
  border: none;
  border-radius: 50%;
}
</style>